<template>
    <div class="details">
        <!-- 标题 -->
        <div style="position:sticky;top:0;z-index:1000;">
            <van-nav-bar @click-left="$router.back()" left-text="返回" title="订单详情"></van-nav-bar>
        </div>
        <div class="pay">
            <div v-if="details.status=='已支付'">
                订单已支付<van-icon name="arrow" size="14" />
            </div>
            <div v-else>
                订单待支付<van-icon name="arrow" size="14" /><br>
                <span>请在15分钟内完成支付，超时将自动取消<br>剩余支付时间：<van-count-down style="display:inline;font-size:12px" millisecond :time="800000" format="mm:ss" /></span>
            </div>
            <div class="btns">
                <van-button @click="toOrders" size="mini">返回订单页</van-button>&nbsp;
                <van-button @click="toOrders" v-if="details.status!='已支付'" color="rgb(209,57,47)" size="mini">去支付</van-button>
            </div>
        </div>
        <div class="details_order">
            <div @click="toIndex" class="store">行走的花草（灵俞花店）<van-icon style="float:right;line-height:20px" name="arrow" size="12" /></div>
            <div class="details_order_list">
                <ul>
                    <li>
                        <div>名称</div>
                        <div>价格</div>
                        <div>数量</div>
                    </li>
                    <li v-for="o in details.orderLines" :key="o.id">
                        <div>
                            <div><img :src="o.photo" width="40" height="40"></div>
                            <div>
                                <span>{{o.name}}</span><br>
                                <span style="font-size:10px;color:rgb(160,160,160)">{{o.product.description.substring(0,8)}}</span>
                            </div>
                        </div>
                        <div>￥ {{o.price}}</div>
                        <div>x{{o.num}}</div>
                    </li>
                </ul>
                <div style="line-height:2em;padding:.5em 0;border-bottom: 1px solid rgb(231, 227, 227);">
                    <div style="float:right;text-align:right;">￥ 0<br></div>
                    <div>包装费</div>
                    <div style="float:right;text-align:right;color:rgb(209,57,47)">-￥ 1</div>
                    <div>优惠</div>
                </div>
                <div class="details_order_total">
                    <span style="color:#666">共计：</span><span style="font-size:13px">￥{{details.total}}</span>
                </div>
                <div class="contact">联系商家</div>
            </div>
        </div>
        <div class="details_info">
            <span>订单编号：</span>{{details.id}}<br>
            <span>客户称呼：</span>{{details.customer.realname.trim().substring(0,1)}} ({{details.customer.gender=='male'?'先生':'女士'}})<br>
            <span>手机号码：</span>{{details.customer.telephone}}<br>
            <span>地址信息：</span>{{details.address?details.address.province+details.address.city+details.address.area+details.address.address:'自提'}}<br>
            <span>下单时间：</span>{{moment(details.orderTime).format('YYYY-MM-DD hh:mm') }}<br>
            <span>备注信息：</span>{{details.buyerMessage || '无'}}<br>
        </div>
    </div>
</template>
<script>
import { ref,onBeforeMount,onMounted } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import { get } from '../../../utils/request'
import moment from 'moment'
export default {
    setup(){
        let route = useRoute();  // 使用路由
        let router = useRouter();
        let details = ref({customer:{realname:''},});
        // 根据订单id查询订单详情
        let loadOrderDetails = async ()=>{
            let resp = await get('/app/order/findById',{id:route.query.id});
            details.value = resp.data;
        }
        // 跳转到订单列表页
        let toOrders = ()=>{
            router.push('/home/orders');
        }
        // 跳转到首页
        let toIndex = ()=>{
            router.push('/home/index');
        }
        onMounted(async()=>{
            await loadOrderDetails();
        })
        return {
            details,
            moment,
            toOrders,
            toIndex
        }
    }
}
</script>
<style lang="scss" scoped>
.details{
    .pay{
        background-color: #fff;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        padding: 1em;
        margin-bottom: .5em;
        span{
            font-size: 12px;
            font-weight: normal;
            color: #777777;
        }
        .btns{
            margin-top: .3em;
        }
    }
    .details_order{
        background-color: #fff;
        padding: 1em;
        margin-bottom: .5em;
        .store{
            font-weight: bold;
            padding-bottom: .7em;
            border-bottom: 1px solid rgb(231, 227, 227);
        }
        .details_order_list{
            margin-top: .7em;
            font-size: 12px;
            ul{
                padding-bottom: .5em;
                border-bottom: 1px solid rgb(231, 227, 227);
                li{
                    margin-bottom: .5em;
                    &>div:first-child{
                        float: left;
                        width: 130px;
                        position: relative;
                        &>div:first-child{
                            width: 40px;
                            height: 40px;
                        }
                        &>div:last-child{
                            line-height: 20px;
                            position: absolute;
                            left: 44px;
                            top: 0px;
                        }
                    }
                    &>div:nth-child(2){
                        float:right;
                    }
                    &>div:last-child{
                        margin:0 100px 0 150px;
                    }
                    &::after{
                        content: '';
                        clear: both;
                        display: block;
                    }
                }
                &>li:not(:first-child){
                    line-height: 40px;
                }
            }
            .details_order_total{
                padding: 1em 0;
                text-align: right;
                border-bottom: 1px solid rgb(231, 227, 227);
            }
            .contact{
                font-size: 14px;
                color: #333;
                padding-top: 1em;
                text-align: center;
            }
        }
    }
    .details_info{
        background-color: #fff;
        padding: 1em;
        font-size: 12px;
        line-height: 2em;
        span{
            color: rgb(160, 160, 160);
        }
    }
}
</style>